[day25][前端][實作] SCSS，一個CSS預處理器

12th鐵人賽

驢子

2020-10-10 09:27:40

920 瀏覽

分享至

同步發表到驢形筆記

SCSS簡單教學

這邊主要講解SCSS最基本的使用方法，就能讓你應付大部分的狀況！這邊有想要更進一步學習可以看關於我的佛系SCSS開發條列了更多scss可以做到的事情，但是下面的方法組合運用就能應付絕大部分的情況

讓我們開始寫scss吧，前往"app.vue"更改一下

src\client\app.vue

<template>
  <div class="container">
    <h1 class="container_title">
      hello {{state.message}}
    </h1>
    <router-view
      class="main_container"
    />
    <h2 class="container_subtitle">
      hello {{ vuexName }}
    </h2>
    <br>
    <router-link class="routerLink" :to="{name: 'home'}">home</router-link>
    <br>
    <router-link class="routerLink" :to="{name: 'addNumber'}">addNumber</router-link>
  </div>
</template>
略
<style lang="scss" scoped>
.container {
  font-size:  20px 400;
}
.container .routerLink{
  display: inline-block;
  padding: 2px;
  margin: 2px;
  border: 1px solid #000;
  text-decoration: none;
}
</style>

這邊我們為router增加了class，然後在style內選擇到"routerLink"上。但是scss的特性讓style可以改成這樣寫

.container {
  .routerLink{
    display: inline-block;
    padding: 2px;
    margin: 2px;
    border: 1px solid #000;
    text-decoration: none;
  }
}

他的結果跟上面的功能是一樣的！然後我們在針對"container_title"和"container_subtitle"去下css

.container_title{
  font-size: 32px;
  color: #f00;
}
.container_subtitle{
  font-size: 28px;
  color: #00f;
}
.container {
  .routerLink{
    display: inline-block;
    padding: 2px;
    margin: 2px;
    border: 1px solid #000;
    text-decoration: none;
  }
}

然後利用scss的特性再次更改一下

.container {
  &_title{
    font-size: 32px;
    color: #f00;
  }
  &_subtitle{
    font-size: 28px;
    color: #00f;
  }
  .routerLink{
    display: inline-block;
    padding: 2px;
    margin: 2px;
    border: 1px solid #000;
    text-decoration: none;
  }
}

這樣做不但可以擁有統一管理的好處，編譯出來還會跟".container_title"只有一層！可以輕鬆解決寫太深的效能問題，而且scss最大的好處是可以用變數和共用css。首先把顏色變數包起來放

$colorTitle :  #f00;
.container {
  &_title{
    font-size: 32px;
    color:$colorTitle;
  }
  &_subtitle{
    font-size: 28px;
    color: #00f;
  }
  .routerLink{
    display: inline-block;
    padding: 2px;
    margin: 2px;
    border: 1px solid #000;
    text-decoration: none;
  }
}

然後把兩的顏色包成一個物件並呼叫

$color : (
  title : #f00,
  subtitle : #00f,
);
.container {
  &_title{
    font-size: 32px;
    color: map-get($map: $color, $key: 'title');
  }
  &_subtitle{
    font-size: 28px;
    color: map-get($map: $color, $key: 'subtitle');
  }
  .routerLink{
    display: inline-block;
    padding: 2px;
    margin: 2px;
    border: 1px solid #000;
    text-decoration: none;
  }
}

接著拿出統一管理css功能，並使用類似陣列的方式統一管理字型的大小與字重

$color : (
  title : #f00,
  subtitle : #00f,
);
$fontStyleName: (
  title : 32px 700,
  subtitle : 28px 400,
);
// 空一格代表陣列位置
@mixin fontStyle($fontPick) {
  font-size: nth(map-get($fontStyleName, $fontPick), 1);
  font-weight: nth(map-get($fontStyleName, $fontPick), 2);
  // 一個呼叫位置１，一個呼叫２
  color: map-get($color, $fontPick);
}
.container {
  &_title{
    @include fontStyle('title');
  }
  &_subtitle{
    @include fontStyle('subtitle');
  }
  .routerLink{
    display: inline-block;
    padding: 2px;
    margin: 2px;
    border: 1px solid #000;
    text-decoration: none;
  }
}

這樣scss的基本用法就算完成了！但是總不能讓變數散落一地對吧！讓我們統一管理這些變數囉！在"client"新增一個"scss"資料夾後新增一個"global.scss"然後把宣告的變數通通丟進去

src\client\scss\global.scss

$color : (
  title : #f00,
  subtitle : #00f,
);
$fontStyleName: (
  title : 32px 700,
  subtitle : 28px 400,
);
// 空一格代表陣列位置
@mixin fontStyle($fontPick) {
  font-size: nth(map-get($fontStyleName, $fontPick), 1);
  font-weight: nth(map-get($fontStyleName, $fontPick), 2);
  // 一個呼叫位置１，一個呼叫２
  color: map-get($color, $fontPick);
}

現在你的webpack應該會報錯，接著讓我們追加webpack設定！讓global.scss統一宣告的變數自動import到每個vue檔裡面

/* webpack.config.js ： Webpack 的設定檔 */
 略
const clientConfig = {
略
  module: {
    rules: [
略
      {
        test: /\.scss|\.css$/,
        use: [
          'style-loader',
          'css-loader',
          'postcss-loader',
          'sass-loader',
          {
            loader: 'sass-resources-loader',
            options: {
              // Provide path to the file with resources
              resources: path.join(__dirname, 'src/client/scss/global.scss'),
            },
          },
        ]
      },
略
    ],
  }
}
module.exports = [serverConfig, clientConfig];

接著安裝"sass-resources-loader"重新開啟webpack就可以啦！